<template>
    <div class="container">
      <div class="cheader2">
        <van-icon
          @click="goBack"
          class="chl"
          name="arrow-left"
          color="#000"
          size="20"
        />
        <div class="chtitle">分享</div>
        <div class="djbox"></div>
      </div>
      <div class="box">
        <van-loading v-if="show" type="spinner" style="margin:40px auto;display: flex;justify-content: center;"/>
        <iframe
          style="background-color: transparent"
          width="100%"
          height="4000"
          :src="wurl"
          frameborder="0"
        ></iframe>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed,ref } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import { useStore } from "@/store";
  const store = useStore();
  const router = useRouter();
  const route = useRoute();
  const wurl = route.query.wurl;
  const show = ref(true)
  const timer = setTimeout(()=>{
    show.value = false
    clearTimeout(timer)
  },3000)
  const goBack = () => {
    router.go(-1);
  };
  </script>
  
  <style lang="scss" scoped>
  .cheader2 {
    z-index: 1001;
    width: 100%;
    height: 45px;
    background-color: #fff;
    font-size: 16px;
    color: #000;
    position: fixed;
    top: 0;
    left: 0;
    .chl {
      position: absolute;
      left: 16px;
      top: 50%;
      text-align: center;
      transform: translateY(-50%);
    }
    .chtitle {
      position: absolute;
      left: 50%;
      top: 50%;
      text-align: center;
      transform: translate(-50%, -50%);
    }
    .djbox {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      img {
        width: 16px;
        margin-right: 4px;
      }
      div {
        font-size: 13px;
        color: #878b97;
      }
    }
  }
  .box {
    padding-top: 50px;
    color: #000;
  }
  </style>